<template>
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <el-form-item label="编号">
      <el-input v-model="formData.id" placeholder="请输入视频文件编号" clearable />
    </el-form-item>
    <el-form-item label="名称">
      <el-input v-model="formData.vname" placeholder="请输入视频文章名字" clearable />
    </el-form-item>
    <el-form-item label="批量查询">
      <el-input v-model="formData.ids" placeholder="请输入视频文章ID" clearable />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <!--列表数据-->
  <el-table :data="videoData" style="width: 100%; text-align: center;">
    <el-table-column type="selection" width="55" :selectable="selectable" />
    <el-table-column fixed prop="id" label="编号" width="80" />
    <el-table-column prop="vname" label="文章名称" width="240" />
    <el-table-column prop="vimg" label="视频封面" width="120">
      <template #default="scope">
        <img :src="scope.row.vimg" alt="" width="100%" height="60"></img>
      </template>
    </el-table-column>
    <el-table-column prop="videoplay" label="视频文件" width="120">
      <template #default="scope">
        <video :src="scope.row.videoplay" controls width="100%" height="60"></video>
      </template>
    </el-table-column>
    <el-table-column prop="username" label="作者名称" width="100" />
    <el-table-column prop="createtime" label="创建时间" width="100" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button type="danger" size="small" @click="handleClick(scope.row.id)">
          删除
        </el-button>
        <el-button type="warning" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="pageData.pageNum" v-model:page-size="pageData.pageSize"
    :page-sizes="[4, 8, 16, 32]" background layout="total, sizes, prev, pager, next, jumper" :total="pageData.total"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
// 接入后台api
import { CarVideosApi } from '../../api';
import { useRouter } from 'vue-router';
const router = useRouter();
const formData = reactive({
  id: '',
  vname: '',
  ids: [],

})
const videoData = ref()
// 分页变量定义
const pageData = reactive({
  pageSize: 4,
  pageNum: 1,
  total: 0
})

onMounted(() => {
  CallCarVideoApi()
})


const CallCarVideoApi = () => {
  const ids = formData.ids.length == 0 ? null : formData.ids;
  const vname = formData.vname == undefined ? null : formData.vname;
  const id = formData.id == '' ? null : formData.id;
  CarVideosApi.select.call({
    id: id, vname: vname, ids: ids,
    pageNum: pageData.pageNum,
    pageSize: pageData.pageSize,
    sort: 'id,desc'
  }).then(res => {
    console.log(res);

    videoData.value = res.items
    pageData.total = res.total

  })
}
const onSubmit = () => {
  CallCarVideoApi()
}

// 每页显示的数据量
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  // 每页显示的数据量改变时 更新数据
  pageData.pageSize = val
  CallCarVideoApi()
}

// 当前页码改变时会触发
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  //当点击页码的时候 切换页面并更新数据
  pageData.pageNum = val
  // 更新页面数据
  CallCarVideoApi()
}

// 修改数据？
const handleEdit = (id) => {
  console.log('修改数据', id);
  router.push({ path: '/carvideo/edit/' + id })
  // router.push({path:'/carvideo/edit',query:{id:id}})
}
// 删除数据
const handleClick = (id) => {
  console.log("删除的id为:", id);
  ElMessageBox.confirm(
    '您确定要对' + 'id=' + id + '进行删除操作吗?',
    '警告！',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 删除数据操作api接口
      CarVideosApi.delete.call({ id: id }).then(res => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        //更新当前列表数据
        CallCarVideoApi()
      })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消成功',
      })
    })

}

</script>

<style scoped>
.el-pagination {
  margin-top: 20px;
}
</style>